<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小年快乐</title>
    <meta name="description" content="小年快乐">
    <link rel="shortcut icon" href="https://www.jb51.net/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./animate/animate.min.css">
    <style>
        body {
            margin: 0px;
        }

        #app {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            overflow: hidden;
        }

        #app .bg {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            opacity: 1;
            transition: all 500ms ease;
        }

        #app .bg-hide {
            opacity: 0;
        }

        #app .fu-bg {
            position: absolute;
            width: 80%;
            height: auto;
            left: 50%;
            top: 20%;
            transform: translate(-50%, 0%) scale(0);
            animation: showIn 500ms ease forwards;
        }

        #app .fu {
            position: absolute;
            width: 70%;
            height: auto;
            left: 50%;
            top: 22.5%;
            transform: translate(-50%, 0%) scale(0);
            animation: showIn 500ms ease forwards;
        }

        @keyframes showIn {
            0% {
                transform: translate(-50%, 0%) scale(0);
            }

            100% {
                transform: translate(-50%, 0%) scale(1);
            }
        }

        .bottom-img {
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
        }

        .bg-img {
            position: absolute;
            top: 10%;
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            object-position: top;
        }

        .bg-img.firework {
            left: 0px;
            width: 90%;
            padding: 10%;
        }

        .bg-img.cloud {
            width: 80%;
            left: 10%;
            top: 70%;
            opacity: 1;
            transition: all 500ms ease;
        }

        .bg-img.font {
            top: 60%;
            width: 80%;
            left: 10%;
            opacity: 1;
            transform: scale(1);
            transition: all 500ms ease-in;
        }
        .bg-img.font-hide{
            transform: scale(1.6);
            opacity: 0;
        }

        .bg-img.left {
            top: 46%;
            left: 14%;
            width: 36%;
        }

        .bg-img.right {
            top: 46%;
            right: 14%;
            width: 36%;
        }

        .bg-img.rabbit {
            width: 80%;
            top: 18%;
            left: 10%;
        }
    </style>
</head>

<body>
    <div id="app">
        <transition-group enter-from-class="bg-hide">
            <img v-show="isShowBg" class="bg" src="./pic/6389618928b13.png" alt="" srcset="" key="bgA">
            <img v-show="isShowBg" class="bg-img cloud" src="./pic/6389618928b73.png" alt="" srcset="" key="bgB">
        </transition-group>
        <transition :appear="true" @after-enter=" isShowFu=true ">
            <img class="fu-bg" src="./pic/6389618928bb1.png" alt="" srcset="">
        </transition>
        <transition @after-enter=" isShowBg=true;isShowHua=true; ">
            <img v-show="isShowFu" class="fu" src="./pic/6389618928be7.png" alt="" srcset="">
        </transition>
        <transition-group enter-active-class="animate__animated animate__bounceInDown" @after-enter="isShowFont=true">
            <img v-show="isShowBorder" class="bg-img" src="./pic/6389618928d60.png" alt="" srcset="" key="bordreA">
            <img v-show="isShowBorder" class="bg-img firework" src="./pic/6389618928ca1.png" alt="" srcset="" key="bordreB">
        </transition-group>
        <transition enter-active-class="animate__animated ">
        </transition>
        <transition enter-from-class="font-hide">
            <img v-show="isShowFont" class="bg-img font" src="./pic/6389618928dcc.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animate__animated animate__fadeInLeft" @after-enter=" isShowRabbit=true ">
            <img v-show="isShowHua" class="bg-img left " src="./pic/6389618928c16.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animate__animated animate__fadeInRight">
            <img v-show="isShowHua" class="bg-img right " src="./pic/6389618928c45.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animate__animated animate__bounceInUp" @after-enter=" isShowBorder=true ">
            <img v-show="isShowRabbit" class="bg-img rabbit" src="./pic/5v1la99t18l6fck.png" alt="" srcset="">
        </transition>
        <transition :appear="true" enter-active-class="animate__animated animate__fadeInUp">
            <img class="bottom-img" src="./pic/6389618928e10.png" alt="" srcset="">
        </transition>

    </div>
    <script src="./vue3/vue.global.prod.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShowFu: false,
                    isShowBg: false,
                    isShowHua:false,
                    isShowRabbit:false,
                    isShowBorder:false,
                    isShowFont:false
                }
            }
        }).mount("#app");
    </script>
</body>

</html>